<template>
  <div v-if="show"
class="skeleton-screen">
    <!-- 头部骨架 -->
    <div class="skeleton-header" />

    <!-- 内容骨架 -->
    <div class="skeleton-content">
      <div
        v-for="i in count"
        :key="i"
        class="skeleton-item"
        :style="{ width: `${Math.random() * 50 + 50}%` }"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  defineProps({
    show: {
      type: Boolean,
      default: true,
    },
    count: {
      type: Number,
      default: 5,
    },
  })
</script>

<style scoped>
  .skeleton-screen {
    /* 骨架屏样式 */
    background: #fff;
    padding: 20px;
  }

  .skeleton-header {
    height: 40px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease infinite;
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .skeleton-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .skeleton-item {
    height: 20px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease infinite;
    border-radius: 4px;
  }

  @keyframes skeleton-loading {
    0% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }
</style>
